/*
 * @Author: syyao 
 * @Date: 2019-05-27 23:18:21 
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-11 20:10:42
 */

<template>
    <div id="pictureHub">
        <div style="margin-top:1vw;margin-left: -2vw;">
            <a @click="openUpload = true" type="text" class="function">上传</a>
            <a @click="download" type="text" class="function">下载</a>
            <a @click="select" type="text" class="function">全选</a>
            <a @click="movePictures = true" type="text" class="function">移动</a>
            <a @click="choosenPublic = true" type="text" class="function">发布</a>
            <a @click="choosenPrivate" type="text" class="function">取消发布</a>
            <a @click="deletePictures" type="text" class="function">删除</a>
        </div>

        <div class="col1">
            <div v-for="(picture,index) in pictureList" :key="index">
                <div class="cast">
                    <!-- <img :src="picture" :alt="picture" style="max-hight:200px;max-width:200px"> -->
                    <picPer :pictureInfo="picture" @changeState="change" ref="child"></picPer>
                </div>
            </div>
        </div>

        <!-- 上传的抽屉 -->
        <Drawer title="上传图片" :closable="false" v-model="openUpload">
            <Select
                v-model="targetFolder.PersonalHubId"
                prefix="ios-home"
                style="width:200px"
                on-change="changeTarget"
            >
                <Option
                    v-for="list in hubList"
                    :value="list.id"
                    :key="list.id"
                >{{ list.personalHubname }}</Option>
            </Select>
            <Upload
                multiple
                :data="targetFolder"
                name="Images"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-success="upSuccess"
                :on-exceeded-size="handleMaxSize"
                :action="src"
            >
                <Button icon="ios-cloud-upload-outline">Upload files</Button>
            </Upload>
        </Drawer>

        <!-- 发布的抽屉 -->
        <Drawer title="发布图片" :closable="false" v-model="choosenPublic" width="40">
            <div style=" width:93%;margin:0 auto;">
                <div class="col2">
                    <div v-for="(publicPicture,index) in choosenList" :key="index">
                        <div class="cast">
                            <div
                                class="choosenPublicPic"
                                :style="{backgroundImage:'url('+'\''+publicPicture.picturepath+'\''+')'}"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
            <Card style="width:93%;margin:0 auto;margin-top:2vw;">
                <p slot="title">标题</p>
                <Input v-model="postTitle" placeholder="请输入标题" style="width: 300px"/>
            </Card>

            <Card style="width:93%;margin:0 auto;margin-top:2vw;">
                <p slot="title">标签</p>
                <div style="height:2vw">
                    <Row>
                        <i-col span="3">
                            <span>标签：</span>
                        </i-col>
                        <i-col span="21">
                            <Breadcrumb separator="<b class='demo-breadcrumb-separator'>></b>">
                                <BreadcrumbItem v-if="chooseTag.tag1!==''">{{chooseTag.tag1}}</BreadcrumbItem>
                                <BreadcrumbItem v-if="chooseTag.tag2!==''">{{chooseTag.tag2}}</BreadcrumbItem>
                                <BreadcrumbItem v-if="chooseTag.tag3!==''">{{chooseTag.tag3}}</BreadcrumbItem>
                            </Breadcrumb>
                        </i-col>
                    </Row>
                </div>
                <Select
                    v-model="chooseTag.tag1"
                    prefix="ios-pricetag"
                    style="width:200px"
                    @on-change="requestTag2"
                >
                    <Option v-for="(list,id) in tag1List" :value="list" :key="id">{{ list }}</Option>
                </Select>
                <Tooltip content="点我添加标签" placement="top" transfer style="margin-left:0.8vw">
                    <Icon
                        v-if="chooseTag.tag1 ==''"
                        type="md-arrow-round-back"
                        size="20"
                        v-on:click="pushAddTag(1)"
                    />
                </Tooltip>
                <Input
                    v-if="chooseTag.tag1 ==''"
                    v-model="addTag1"
                    placeholder="没有想要的？请补充在这"
                    style="width: 200px;margin-left:0.8vw;"
                />

                <div v-if="chooseTag.tag1 !==''" style="margin-top:0.6vw">
                    <Select
                        v-model="chooseTag.tag2"
                        prefix="ios-pricetag"
                        style="width:200px;"
                        @on-change="requestTag3"
                    >
                        <Option v-for="(list,id) in tag2List" :value="list" :key="id">{{ list }}</Option>
                    </Select>
                    <Tooltip content="点我添加标签" placement="top" transfer style="margin-left:0.8vw">
                        <Icon
                            v-if="chooseTag.tag1 !=='' && chooseTag.tag2=='' "
                            type="md-arrow-round-back"
                            size="20"
                            v-on:click="pushAddTag(2)"
                        />
                    </Tooltip>
                    <Input
                        v-if="chooseTag.tag1 !=='' && chooseTag.tag2=='' "
                        v-model="addTag2"
                        placeholder="没有想要的？请补充在这"
                        style="width:200px;margin-left:0.8vw;"
                    />
                </div>

                <div v-if="chooseTag.tag2!==''" style="margin-top:0.6vw">
                    <Select v-model="chooseTag.tag3" prefix="ios-pricetag" style="width:200px;">
                        <Option v-for="(list,id) in tag3List" :value="list" :key="id">{{ list }}</Option>
                    </Select>
                    <Tooltip content="点我添加标签" placement="top" transfer style="margin-left:0.8vw">
                        <Icon
                            v-if="chooseTag.tag2!==''"
                            type="md-arrow-round-back"
                            size="20"
                            v-on:click="pushAddTag(3)"
                        />
                    </Tooltip>
                    <Input
                        v-if="chooseTag.tag2!==''"
                        v-model="addTag3"
                        placeholder="没有想要的？请补充在这"
                        style="width: 200px;margin-left:0.8vw;"
                    />
                </div>
            </Card>

            <Card style="width:93%;margin:0 auto;margin-top:2vw;">
                <Row>
                    <i-col span="3">
                        <p style="font-weight:600;">浏览限制</p>
                    </i-col>
                    <i-col span="21">
                        <RadioGroup v-model="postType">
                            <Radio label="public">所有人</Radio>
                            <Radio label="protect" style="margin-left:1vw">仅对我关注的人</Radio>
                        </RadioGroup>
                    </i-col>
                </Row>
            </Card>

            <Card style="width:93%;margin:0 auto;margin-top:2vw;">
                <Row>
                    <i-col span="3">
                        <p style="font-weight:600;">原创作品</p>
                    </i-col>
                    <i-col span="21">
                        <Radio label="是"></Radio>
                    </i-col>
                </Row>
            </Card>

            <div style="width:92%;margin:0 auto;margin-top:2vw;margin-bottom:4vw">
                <Checkbox v-model="agreemwnt"></Checkbox>
                <span>
                    已经阅读并遵守
                    <span style="color:#16A9FF">使用条例</span>
                    和
                    <span style="color:#16A9FF">相关法律</span>
                </span>
            </div>
            <div class="demo-drawer-footer">
                <Button type="primary" :disabled="!agreemwnt" v-on:click="post">发布</Button>
            </div>
        </Drawer>

        <Modal v-model="movePictures" title="请选择你想要移动到的仓库" @on-ok="move">
            <Select
                v-model="moveToFolder"
                prefix="ios-home"
                style="width:200px"
                on-change="changeTarget"
            >
                <Option
                    v-for="list in hubList"
                    :value="list.id"
                    :key="list.id"
                >{{ list.personalHubname }}</Option>
            </Select>
        </Modal>
    </div>
</template>

<script>
import picPer from "../../components/picture/picPerHub";

export default {
  data() {
    return {
      HubId: "",
      pictureList: [],
      choosenList: [],
      hubList: [],
      tag1List: [],
      tag2List: [],
      tag3List: [],
      chooseTag: {
        tag1: "",
        tag2: "",
        tag3: ""
      },
      targetFolder: {
        PersonalHubId: ""
      },
      moveToFolder: "",
      openUpload: false,
      choosenPublic: false,
      src: "",
      postTitle: "",
      addTag1: "",
      addTag2: "",
      addTag3: "",
      postType: "",
      agreemwnt: false,
      movePictures: false
    };
  },
  components: {
    picPer
  },
  created() {
    this.HubId = this.$route.params.HubId;
    this.$store.commit("setChoosenHubId", this.HubId);
    this.getHubPic(this.HubId);
    this.src = this.postIp + "/upLoadToPersonal";
    this.hubList = this.$store.state.user.Hub;
    this.targetFolder.PersonalHubId = this.$store.state.user.choosenPHubId;
    this.moveToFolder = this.$store.state.user.choosenPHubId;
  },
  watch: {
    "$route.params.HubId": function(newVal) {
      this.HubId = newVal;
      this.$store.commit("setChoosenHubId", newVal);
      this.getHubPic(newVal);
    },
    "$store.state.user.choosenPHubId": function(newVal) {
      this.targetFolder.PersonalHubId = newVal;
      this.moveToFolder = newVal;
    },
    choosenPublic: function() {
      if (this.choosenPublic === true) {
        let _this = this;
        this.http.post(this, "/MainTab").then(function(msg) {
          if (msg.data.code === "200") {
            _this.tag1List = JSON.parse(JSON.stringify(msg.data.data));
          }
        });
      }
    }
  },
  computed: {},
  methods: {
    getHubPic(id) {
      this.pictureList = [];
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("HubId", id);
      this.http.post(this, "/getHubPicture", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.pictureList = JSON.parse(JSON.stringify(msg.data.data));
        } else {
          _this.$router.push({
            name: "error"
          });
        }
      });
    },
    upSuccess() {
      this.getHubPic(this.HubId);
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件大小限制",
        desc: "图片  " + file.name + " 过大, 请勿超过 2M."
      });
    },
    change(temp) {
      console.log(temp);
      if (temp.ischoose === true) {
        this.choosenList.push({ ...temp.info });
      } else {
        let a = this.choosenList.find(item => item.id === temp.info.id);
        this.choosenList.splice(a, 1);
      }
    },
    select() {
      this.$refs.child.forEach(item => {
        item.choose();
      });
      this.choosenList = JSON.parse(JSON.stringify(this.pictureList));
      console.log(this.choosenList);
    },
    move() {
      if (this.choosenList.length === 0) {
        this.$Message.info("请先选择所要移动的图片");
        return;
      }

      let _this = this;
      let Params = new URLSearchParams();
      Params.append("PersonalHubId", this.moveToFolder);
      Params.append(
        "pictureId",
        this.choosenList.map(item => {
          return item.id;
        })
      );
      this.http.post(this, "/moveListHub", Params).then(function(msg) {
        _this.$Message.success("移动成功");
        _this.getHubPic(_this.HubId);
        _this.choosenList = [];
      });
    },
    download() {
      if (this.choosenList.length === 0) {
        this.$Message.info("请先选择所要下载的图片");
        return;
      }

      for (let image of this.choosenList) {
        let url = image.picturepath;
        let id = image.id;
        let time = new Date();
        fetch(url)
          .then(res => res.blob())
          .then(blob => {
            // 创建隐藏的可下载链接
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = URL.createObjectURL(blob);
            a.download = "iSee" + time.getTime() + id + ".png";
            document.body.appendChild(a);
            a.click();
            // 移除元素
            document.body.removeChild(a);
          });
      }

      this.$refs.child.forEach(item => {
        item.unchoose();
      });
      this.choosenList = [];
    },
    deletePictures() {
      if (this.choosenList.length === 0) {
        this.$Message.info("请先选择所要删除的图片");
        return;
      }
      this.$Modal.confirm({
        title: "<p>请确认是否要删除图片</p>",
        onOk: () => {
          let _this = this;
          let Params = new URLSearchParams();
          Params.append(
            "pictureId",
            this.choosenList.map(item => {
              return item.id;
            })
          );
          Params.append("PersonalHubId", this.HubId);
          this.http.post(this, "/deleteImages", Params).then(function(msg) {
            if (msg.data.code === "200") {
              _this.$Message.success("删除成功");
              _this.getHubPic(_this.HubId);
              _this.$refs.child.forEach(item => {
                item.unchoose();
              });
              _this.choosenList = [];
            }
          });
        },
        onCancel: () => {}
      });
    },
    pushAddTag(id) {
      let Params = new URLSearchParams();
      if (id === 1) {
        Params.append("TagName", [this.addTag1]);
        this.tag1List.push(this.addTag1);
        this.chooseTag.tag1 = this.addTag1;
      } else if (id === 2) {
        Params.append("TagName", [this.chooseTag.tag1, this.addTag2]);
        this.tag2List.push(this.addTag2);
        this.chooseTag.tag2 = this.addTag2;
      } else {
        Params.append("TagName", [
          this.chooseTag.tag1,
          this.chooseTag.tag2,
          this.addTag3
        ]);
        this.tag3List.push(this.addTag3);
        this.chooseTag.tag3 = this.addTag3;
      }

      this.http.post(this, "/addTag", Params).then(function(msg) {});
    },
    choosenPrivate() {
      if (this.choosenList.length === 0) {
        this.$Message.info("请先选择所要取消发布的图片");
        return;
      }

      let _this = this;
      let Params = new URLSearchParams();
      Params.append(
        "pictureid",
        this.choosenList.map(item => {
          return item.id;
        })
      );
      this.http.post(this, "/ispubliclist", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.$Message.success("取消发布成功");
          _this.$refs.child.forEach(item => {
            item.unchoose();
          });
          _this.choosenList = [];
          _this.getHubPic(_this.HubId);
        }
      });
    },
    post() {
      if (this.choosenList.length === 0) {
        this.$Message.info("请先选择所要发布的图片");
        return;
      }

      let _this = this;
      let Params = new URLSearchParams();
      Params.append(
        "ImagesId",
        this.choosenList.map(item => {
          return item.id;
        })
      );
      let postTag = [];
      if (this.chooseTag.tag1 === "") {
        this.$Message.warning("请至少选择一个标签");
        retuen;
      }
      postTag.push(this.chooseTag.tag1);
      if (this.chooseTag.tag2 !== "") {
        postTag.push(this.chooseTag.tag2);
      }
      if (this.chooseTag.tag3 !== "") {
        postTag.push(this.chooseTag.tag3);
      }
      console.log(postTag);
      Params.append("TagName", postTag);
      Params.append("title", this.postTitle);
      Params.append("available", "1");
      this.http.post(this, "/fabu", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.$Message.success("发布成功");
          _this.$refs.child.forEach(item => {
            item.unchoose();
          });
          _this.choosenList = [];
          _this.choosenPublic = false;
        }
      });
    },
    requestTag2(value) {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("parentTag", this.chooseTag.tag1);
      this.http.post(this, "/ChildTag", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.tag2List = JSON.parse(JSON.stringify(msg.data.data));
        }
      });
    },
    requestTag3(value) {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("parentTag", this.chooseTag.tag2);
      this.http.post(this, "/ChildTag", Params).then(function(msg) {
        if (msg.data.code === "200") {
          _this.tag3List = JSON.parse(JSON.stringify(msg.data.data));
        }
      });
    }
  }
};
</script>

<style>
.cast {
  display: inline-block;
  /* width: 200px;
  height: 200px; */
  margin-top: 1vw;
}

.col1 {
  column-count: 5;
  column-gap: 1vw;
  column-fill: auto;
  font-size: 0px;
  line-height: 0;
}

.col2 {
  column-count: 4;
  column-gap: 1vw;
  column-fill: auto;
  font-size: 0px;
  line-height: 0;
  height: auto;
}

.function:hover {
  border-bottom: 0.1vw #34b4ff solid;
}

.function {
  color: #34b4ff;
  font-size: 0.9vw;
  font-weight: bold;
  margin-left: 2vw;
  margin-top: 2vw;
}

.choosenPublicPic {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 8vw;
  height: 8vw;
  border-radius: 10px;
}

.demo-breadcrumb-separator {
  color: #ff5500;
  padding: 0 5px;
}

.demo-drawer-footer {
  width: 40%;
  position: fixed;
  bottom: 0;
  right: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
